import { createRouter as _createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// Pages
const HomePage = () => import('../pages/HomePage.vue')
const ServicesPage = () => import('../pages/ServicesPage.vue')
const DocumentationPage = () => import('../pages/DocumentationPage.vue')
const AboutPage = () => import('../pages/AboutPage.vue')

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomePage,
    meta: { title: 'Home - PayFlow' }
  },
  {
    path: '/services',
    name: 'services',
    component: ServicesPage,
    meta: { title: 'Services - PayFlow' }
  },
  {
    path: '/documentation',
    name: 'documentation',
    component: DocumentationPage,
    meta: { title: 'Documentation - PayFlow' }
  },
  {
    path: '/about',
    name: 'about',
    component: AboutPage,
    meta: { title: 'About Us - PayFlow' }
  }
]

export function createRouter() {
  const router = _createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { top: 0 }
      }
    }
  })

  // Update page title based on route meta
  router.beforeEach((to, from, next) => {
    if (to.meta.title) {
      document.title = to.meta.title as string
    }
    next()
  })

  return router
}